<template>
	<view>
		<form @submit="submit">
			<view class="cu-form-group margin-top">
				<view class="title"> <text class="text-red padding-right-xs">*</text>我的姓名：</view>
				<input placeholder="请输入您的姓名" name="name" :value="formData.name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red padding-right-xs">*</text>手机号码：</view>
				<input placeholder="请输入手机号码" name="phone" type="tel" :value="formData.phone"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red padding-right-xs">*</text>随行人数：</view>
				<input placeholder="请输入随行人数" name="peopleNum" type="number" :value="formData.peopleNum"></input>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">遇见老师：</view>
				<textarea placeholder="请填写希望看到的老师姓名" name="teacher" maxlength="-1" :value="formData.teacher"></textarea>
			</view>
			<view class="cu-form-group">
				<view class="title">是否就餐：</view>
				<switch name="eat" @change="onEat" :class="isEat?'checked':''" :checked="isEat?true:false" />
			</view>
			<view class=" cu-form-group">
				<view class="title"><text class="text-red padding-right-xs">*</text>入校日期：</view>
				<picker name="time" mode="date" :value="formData.time" :start="timeStart" @change="DateChange">
					<view class="picker">
						{{formData.time}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title padding-left-xs">&nbsp;&nbsp;车牌号码：</view>
				<input placeholder="输入框车牌号" name="cardNum"></input>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">入校事由：</view>
				<textarea placeholder="请填写入校事由" maxlength="-1" name="reason"></textarea>
			</view>
			<view class="cu-bar btn-group margin-tb-lg">
				<button class="cu-btn bg-red shadow-blur round lg" form-type="submit">提交</button>
				<button class="cu-btn bg-yellow shadow-blur round lg" @click="goRecords">预约记录</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		reservation_apply,
		card_info
	} from '@/common/api/api.js'

	export default {
		computed: {
			isEat() {
				return this.formData.eat === "1"
			}
		},
		data() {
			return {
				timeStart: uni.$s.timeFormat(this.timestamp, 'yyyy-mm-dd'),
				formData: {
					name: "",
					time: uni.$s.timeFormat(this.timestamp, 'yyyy-mm-dd'),
					peopleNum: "0",
					eat: "0"
				}
			};
		},
		onLoad() {
			this.$nextTick(() => {
				card_info().then(res => {
					let data = this.$s.res(res)
					if (data.phone) {
						this.formData.name = data.name
						this.formData.phone = data.phone
					} else {
						uni.reLaunch({
							url: '/pagesB/phone'
						})
					}
				})
			})
		},
		methods: {
			onEat(e) {
				this.formData.eat = e.detail.value ? "1" : "0"
				console.log(this.formData)
			},
			DateChange(e) {
				this.formData.time = e.detail.value
			},
			submit(e) {
				var formdata = e.detail.value
				formdata.eat = formdata.eat ? "1" : "0"
				if (!formdata.name) {
					uni.showToast({
						icon: 'none',
						title: "姓名不能为空"
					})
					return
				}
				if (!formdata.phone) {
					uni.showToast({
						icon: 'none',
						title: "手机号不能为空"
					})
					return
				}
				if (!formdata.peopleNum) {
					uni.showToast({
						icon: 'none',
						title: "随行人数不能为空"
					})
					return
				}
				if (!formdata.reason) {
					uni.showToast({
						icon: 'none',
						title: "入校事由不能为空"
					})
					return
				}
				reservation_apply(formdata).then(res => {
					if (this.$s.suc(res)) {
						uni.redirectTo({
							url: './result'
						})
					}
				})

			},
			goRecords() {
				uni.navigateTo({
					url: './records'
				})
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>